<template>
	<view style="padding-top: 5%;padding-bottom: 5%;height: 100%;background-color: rgb(243,244,246);height: 100vh;">
		<u-card title="订单确认" v-if="!orderCheck" :sub-title="orderDetail.date +' '+ orderDetail.mealType">
			<view slot="body">
				<scroll-view :style="{'height':windowHeight}" scroll-y>
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="padding: 5%;" v-for="(item,index) in orderDetail.orderList"
					 :key="index">
						<!-- <image :src="imgUrl + item.picture" mode="widthFix" style="width: 30%"/> -->
						<!-- <u-image :src="imgUrl + item.picture" mode="widthFix" style="width: 25%;height: 150rpx;" /> -->
						<u-lazy-load border-radius="20" :image="imgUrl + item.picture" style="width: 25%;height: 150rpx;" @click="previewImg(imgUrl + item.picture)"></u-lazy-load>
						<view class="u-body-item-title u-line-2" style="margin-left: 10%;width: 65%;">
							<view><text style="font-weight: bold;">{{item.name}}</text></view>
							<view><text class="description">{{item.description}}</text></view>
							<view><text style="float: right;">✖{{item.num}}</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view slot="foot" style="padding-left: 10%;padding-right: 10%;">
				<u-row gutter="16">
					<u-col span="7">
						<u-icon name="order" size="40" :label="'共'+foodsSum(orderDetail.orderList)+'道菜'"></u-icon>
					</u-col>
					<u-col span="5">
						<u-icon name="account" size="40" :label="orderDetail.num+'人就餐'"></u-icon>
					</u-col>
				</u-row>

				<u-row>
					<u-col span="7">
						<u-icon name="bookmark" size="40" :label="orderDetail.flavorName"></u-icon>
					</u-col>
					<u-col span="5">
						<u-icon name="map" size="40" :label="orderDetail.placeName"></u-icon>
					</u-col>
				</u-row>

				<u-row gutter="16" v-if="orderDetail.remark !== null && orderDetail.remark !== ''">
					<u-col span="12">
						<u-icon name="chat" size="40" :label="orderDetail.remark"></u-icon>
					</u-col>
				</u-row>
				<u-row style="padding:5%">
					<u-col span="12" text-align="center">
						<!-- <u-button type="primary" :disabled="buttonDisable" open-type="getUserInfo" @getuserinfo="getUserInfo" @click="SubscribeMessage">订单提交</u-button> -->
						<u-button type="warning" :disabled="buttonDisable" open-type="getUserInfo" @getuserinfo="getUserInfo" @click="SubscribeMessage">订单提交</u-button>
					</u-col>
				</u-row>
			</view>
		</u-card>
		<u-card v-else :title="wxName" :sub-title="orderDetail.date" :thumb="photo" thumb-width="60" :key="index"
		 thumb-circle>
			<view slot="body">
				<view>
					<view style="display: flex;">
						<view style="flex: 1;">
							<u-lazy-load border-radius="20" :image="imgUrl + orderDetail.orderList[0].picture" style="height: 170rpx"></u-lazy-load>
							<view style="text-align: center;">{{orderDetail.orderList[0].name}}</view>
						</view>
						<view style="flex: 1;margin-left: 5rpx;" v-if="orderDetail.orderList.length > 1">
							<u-lazy-load border-radius="20" :image="imgUrl + orderDetail.orderList[1].picture"></u-lazy-load>
							<view style="text-align: center;">{{orderDetail.orderList[1].name}}</view>
						</view>
						<view style="flex: 2;display: flex;margin-left: 5rpx;">
							<view style="margin: auto 0;flex: 1;">
								<view style="text-align: right;">{{orderVo.num}}人就餐 共{{orderVo.foods.length}}道菜</view>
								<view style="text-align: right;">{{orderVo.place.place}} {{orderVo.flavor.flavor}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view slot="foot">
				<u-row gutter="16">
					<u-col span="12">
						<view style="float: right;">
							<u-button type="info" size="mini" :custom-style="customBtStyle" @click="navigateToDetail(orderVo.id)">
								已点菜品</u-button>
							<!-- <u-button type="primary" size="mini" :custom-style="customBtStyle" style="margin-left: 20rpx;" @click="addMealMethod(orderVo)">
								为此桌加菜</u-button> -->
							<u-button type="warning" size="mini" :custom-style="customBtStyle" style="margin-left: 20rpx;" @click="addMealMethod(orderVo)">
								为此桌加菜</u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-card>
		<view style="display: flex;padding-left: 10%;padding-right: 10%; padding-top: 10rpx;padding-bottom: 10rpx;" v-if="orderCheck">
			<view style="flex:1;margin-right: 40rpx;">
				<navigator open-type="reLaunch" target="self" url="../order/orderEdit" class="bt-style" style="background-color: white;color: black;">再来一桌</navigator>
			</view>
			<view style="flex:1;margin-left: 40rpx;">
				<!-- <navigator open-type="exit" target="miniProgram" class="bt-style" style="background-color: rgb(41,121,255);color: white;">完成点餐</navigator> -->
				<navigator open-type="exit" target="miniProgram" class="bt-style" style="background-color: rgb(255,153,0);color: white;">完成点餐</navigator>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		orderCommit,
		getAddMealOrder
	} from '@/api/common.js'
	export default {
		data() {
			return {
				imgUrl: '',
				orderDetail: null,
				openId: '',
				photo: '',
				wxName: '',
				buttonDisable: false,
				addMeal: false,
				windowHeight: '',
				orderCheck: false,
				orderVo: null
			}
		},
		onLoad(e) {
			this.windowHeight = getApp().globalData.windowHeight * 0.6 + 'px'
			if (e.addMeal === '1') {
				this.addMeal = true
			}
		},
		created() {
			this.imgUrl = getApp().globalData.baseImgurl
			this.orderDetail = getApp().globalData.orderDetail
			this.openId = getApp().globalData.openId
		},
		methods: {
			getUserInfo(res) {
				console.log(res)
				let that = this
				if (res.detail.errMsg === 'getUserInfo:ok') {
					this.photo = res.detail.userInfo.avatarUrl
					this.wxName = res.detail.userInfo.nickName
					this.submit()
				} else {

					that.$refs.uToast.show({
						title: '请授权获取用户信息,我们将收集您的信息以确认订单。',
						type: 'warning',
						duration: 5000
					})

				}
			},
			SubscribeMessage() {
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: getApp().globalData.templateId,
					complete(res) {
						// that.submit()
					},
					fail(res) {
						console.log("订阅失败", res)
					}
				})
			},
			submit() {
				this.buttonDisable = true

				let foods = this.orderDetail.orderList.map(item => {
					return {
						id: item.id,
						num: item.num
					}
				})
				let order = {
					photo: this.photo,
					username: this.wxName,
					openId: this.openId,
					extraMeal: this.addMeal,
					extraMealId: this.orderDetail.id,
					detail: {
						date: this.orderDetail.timestamp,
						num: this.orderDetail.num,
						place: this.orderDetail.place,
						flavor: this.orderDetail.flavor,
						placeName: this.orderDetail.placeName,
						flavorName: this.orderDetail.flavorName,
						remark: this.orderDetail.remark,
						foodsNum: this.orderDetail.foodsNum,
						foods: foods,
						mealType: this.orderDetail.mealType
					}
				}
				let that = this

				orderCommit(order).then(res => {
					
					that.$refs.uToast.show({
						title: "提交订单成功",
						type: 'success'
					})
					
					
					
					that.clearAll()
					that.orderVo = res.data
					that.orderCheck = true
					
				}).catch(res => {
					console.log(res)
					that.$refs.uToast.show({
						title: res.message,
						type: 'warning'
					})
					that.buttonDisable = false
				})
			},
			navigateToDetail(id) {
				uni.reLaunch({
					url: `../order/orderDetail?id=${id}`
				})
			},
			addMealMethod(orderDeatil) {
				getApp().globalData.addMealOrderDeatil = orderDeatil
				uni.reLaunch({
					url: '/pages/menu/menu?addMeal=true'
				})
			},
			clearAll() {
				getApp().globalData.count = 0
				getApp().globalData.foodsList.forEach(item => {
					item.count = 0
					item.foods.forEach(item1 => {
						item1.num = 0
					})
				})
			},foodsSum(e){
				let total = 0;
				
				e.forEach(item=>{
					total += item.num
				})
			
				return total
			}
		}
	}
</script>


<style>
	.card-left {
		width: 33.33%;
	}

	.card-right {
		margin-left: 3%;
		width: 63.66%;
	}

	.card {
		display: flex;
		padding: 5%;

	}

	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bt-style {
		text-align: center;
		padding: 8px 0;
		border-radius: 10px;
	}
</style>
